<script setup lang="ts">
import type { PropType } from 'vue'
import type { ITableCol } from '@/types'
import vxeColItem from './vxeColItem.vue'

defineProps({
  colItem: {
    type: Object as PropType<ITableCol>,
    default: () => ({}),
  },
  colIndex: {
    type: Number,
  },
  title: {
    type: String,
  },
})
</script>

<template>
  <vxe-colgroup v-if="Number(colItem.width) && colItem.visible" :title="title">
    <template v-for="(childColItem, childColIndex) in colItem.children">
      <vxeColItem
        v-if="!childColItem.children || !childColItem.children.length" :key="colItem.prop + childColIndex"
        :col-item="childColItem" :col-index="childColIndex"
      />
      <vxeColGroup
        v-else :key="`g-${colItem.prop}${childColIndex}`" :col-item="childColItem" :col-index="childColIndex"
        :title="childColItem.label"
      />
    </template>
  </vxe-colgroup>
</template>

<style scoped lang="scss"></style>
